<template>
  <div>
    <el-card style="text-align:left;">
      <el-row>
        <el-col :span="11">
          <el-avatar :size="100" :src="this.$store.state.userInfo.infoImg" fit="cover" style="border:3px solid #BBDDFF"></el-avatar>
        </el-col>
        <el-col :span="13">
          <h2>{{this.$store.state.userInfo.infoNickname}}</h2>
          <el-tooltip class="item" effect="dark" content="首批用户" placement="bottom">
            <img src="../../../assets/first.png" style="width:25px;" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="感觉挺好看的先放这" placement="bottom">
            <img src="../../../assets/test.png" style="width:25px;margin-left:5px" />
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :span="12">
          <el-row>
            <el-col :span="6">
              <img src="../../../assets/fans.png" style="width:20px;" />
            </el-col>
            <el-col :span="18" >
              <span style="font-size:12px;" @click="()=>{this.$router.push('/person/myAttention')}">我的关注</span>
              <p style="font-size:20px;color:#4068bf;margin-top:10px;margin-bottom:0px;" @click="()=>{this.$router.push('/person/myAttention')}">{{this.$store.state.userAttention.length}}</p>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="6">
              <img src="../../../assets/visitor.png" style="width:20px;" />
            </el-col>
            <el-col :span="18">
              <span style="font-size:12px;" @click="()=>{this.$router.push('/person/myFans')}">关注我的</span>
              <p style="font-size:20px;color:#f74f8e;margin-top:10px;margin-bottom:0px;" @click="()=>{this.$router.push('/person/myFans')}">{{this.$store.state.userFans.length}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>


    </el-card>
    <div style="margin-top:40px;">
      <el-button type="warning" @click="()=>{this.$router.push('/person/myPublish')}" style="width:300px;">
        <i class="el-icon-ship"></i>
        查看我的发布
        </el-button>
    </div>
    <div style="margin-top:10px;">
      <el-button type="danger" @click="()=>{this.$router.push('/person/myCollect')}" style="width:300px;">
        <i class="el-icon-present"></i>
        查看我的收藏
        </el-button>
    </div>
    <div style="margin-top:10px;">
      <el-button type="info" @click="()=>{this.$router.push('/person/mySetting')}" style="width:300px;">
        <i class="el-icon-setting"></i>
        账号设置
        </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonSide',
    data() {
      return {
        circleUrl: require('@/assets/001.png'),
      }
    }
  }
</script>

<style>

</style>